<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购买商品</title>
</head>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>
<style>
    .el-header,
    .el-footer {
        text-align: center;
        line-height: 60px;
    }

    .goods {
        border: 2px solid #a1a1a1;
        width: 265px;
        height: 380px;
        border-radius: 25px;
        margin-top: 20px;
        margin-left: 40px;
        display: inline-block;
    }

    .image {
        border-radius: 25px 25px 0px 0px;
        width: 265px;
        height: 255px;
    }
    .seller {
        border-radius: 25px 25px 25px 25px;
        height: 60px;
        width: 1255px;
        margin-left: 60px;
        margin-top: 5px;
        background-color: rgb(238,238,238);

    }
    .evaluation{

        width: 1240px;
        height: auto;
        margin-top: 20px;
        margin-left: 10px;
        display: inline-block;
    }

</style>

<body>
<div id="app">
    <el-container>
        <el-header>
            <div>
                <div  class="seller">
                    <el-avatar :size="40" :src="sellerInfo.headImage"  style="margin-top: 10px;margin-left: -1160px;"> </el-avatar>
                    <div style="margin-left: -960px;margin-top: -75px;">
                        <span style="font-size: 20px;">{{sellerInfo.userName}}</span>
                    </div>
                    <div style="margin-left: -660px;margin-top: -60px;">
                        <span style="font-size: 20px;">他的评分：</span>
                    </div>
                    <div style="margin-left:  -480px;margin-top: -61px;color: red;">
                        <span style="font-size: 20px;">{{sellerInfo.avgRate}}</span>
                    </div>
                    <div style="margin-left: -250px;margin-top: -62px;">
                        <span style="font-size: 20px;">违约次数：</span>
                    </div>
                    <div style="margin-left:  -150px;margin-top: -62px;color: red;">
                        <span style="font-size: 20px;">{{sellerInfo.breakCount}}</span>
                    </div>

                </div>

            </div>
        </el-header>
        <el-main>
            <div style="margin-left: 67px;" >
                <div style="margin-top: 30px;">

                    <el-button type="primary"  @click="changeStatus(1)"
                               :disabled="btnUnChecked">进行中 </el-button>
                    <el-button type="danger" style="margin-left: 5px" @click="changeStatus(2)"
                               :disabled="btnPassed">已结束 </el-button>
                    <el-button type="success" style="margin-left: 5px" @click="changeStatus(3)"
                               :disabled="btnUnBuyed">评论 </el-button>


                </div>
            </div>
            <div style="margin-left: 28px;">
                <div class="goods" v-for="(item,i) in goodsInfo" @click="seeDetail(item.goodsId)"  v-if="!evaluationVisible">
                    <el-image class="image" :src="item.image"></el-image>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    color:#000;
                                    line-height:24px;
                                    white-space:nowrap;
                                    text-overflow:ellipsis;
                                    word-break:break-all;
                                    overflow:hidden;">
                        {{item.goodsName}}
                    </div>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    line-height:24px;;">
                        起拍价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥&nbsp;&nbsp;&nbsp;{{item.startingPrice}}
                    </div>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    line-height:24px;;">
                        开始时间 &nbsp;&nbsp;{{item.startingTime}}
                    </div>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    line-height:24px;;">
                        结束时间 &nbsp;&nbsp;{{item.endTime}}
                    </div>

                </div>

                <div style="margin-left: 28px;">

                    <diV class="evaluation" v-if="evaluationVisible" v-for="(item,i) in evaluationList">
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="1" >
                                <el-avatar :size="40" :src="item.headImage" style="margin-top: 10px;margin-left: 10px;">  </el-avatar>
                            </el-col>
                            <el-col :span="19" style="margin-top:13px;margin-left: 10px;font-weight: bold;font-size: 15px;">
                                <span>{{item.userName}}</span>
                            </el-col>
                            <el-col :span="3" style="margin-top:13px;font-weight: bold;font-size: 15px;">
                                <el-rate
                                        v-model="item.rate"
                                        disabled
                                        show-text
                                        text-color="#ff9900"
                                        score-template="{value}">
                                </el-rate>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="23" style="margin-top: 10px;margin-left: 10px;">
                                <span >{{item.detail}}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-image :src="image" alt="图片不见了"
                                      style="height: 100px;width: 100px;margin-left: 10px;"
                                      ref="preview"
                                      :preview-src-list="item.images"
                                      v-for="(image,j) in item.images">

                            </el-image>
                            <el-image-viewer
                                    v-if="showViewer"
                                    :on-close="closeViewer"
                                    :url-list="item.images"
                            />
                        </el-row>
                        <el-row>
                            <el-col :span="23" style="margin-top: 10px;margin-left: 10px;">
                                <span >{{item.createTime}}</span>
                            </el-col>
                        </el-row>

                    </diV>
                </div>


            </div>
        </el-main>
        <el-footer>
            <div class="block" id="footer"  v-if="!evaluationVisible">
                <el-pagination background @current-change="handleCurrentChange"
                               :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                               layout="total, prev, pager, next, jumper" :total="pagination.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
</div>




</div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {

            sellerInfo: {
                headImage: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                userName: "test1",
                rate: "4",
                breakCount: "0"
            },
            showViewer: false,
            codeUrl: "",
            btnlogin: false,
            btnhead: true,
            formLabelWidth: '120px',
            loginFormVisible: false,
            registerFormVisible: false,
            activeIndex: '1',
            typeName: [
                "黄金",
                "翡翠",
                "和田玉",
                "钻石",
            ],
            evaluationVisible: true,
            currentType: null,
            pagination: { //分页相关模型数据
                currentPage: 1, //当前页码
                pageSize: 12, //每页显示的记录数
                total: 0, //总记录数
            },
            evaluationList: [
                {
                    headImage: "http://127.0.0.1/common/download?name=1.jpg",
                    createTime: "2022-12-30 10:10:10",
                    rate: "4",
                    deatil: "评论详情",
                    images: [
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    ],
                    userName: "test1",
                },
                {
                    headImage: "http://127.0.0.1/common/download?name=1.jpg",
                    createTime: "2022-12-30 10:10:10",
                    rate: "2",
                    deatil: "今天，我去红石公园玩淘气堡。那么大的淘气堡，完全是用气充起来的，摸一摸，很光滑，按一按，有弹性。我迫不及待地脱了鞋，谁知刚一迈上去就来了个“四脚朝天”。不过，没关系，浑身都不疼，用不着哭鼻子，还会哈哈",
                    image: [],
                    userName: "test2",

                }
            ],
            goodsInfo: [
                {
                    "goodsId": null,
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": null,
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "typeId": null,
                    "startingTime": "2022-12-01 14:12:29",
                    "endTime": "2022-12-02 15:00:48",
                    "priceMarkup": null,
                    "createTime": null,
                    "updateTime": null,
                    "status": null,
                    "typeName": null,
                    "image": "http://127.0.0.1/common/download?name=1.jpg"
                },
                {
                    "goodsId": null,
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": null,
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "typeId": null,
                    "startingTime": "2022-12-01 14:12:29",
                    "endTime": "2022-12-02 15:00:48",
                    "priceMarkup": null,
                    "createTime": null,
                    "updateTime": null,
                    "status": null,
                    "typeName": null,
                    "image": "http://127.0.0.1/common/download?name=1.jpg"
                },


            ],
            btnUnChecked: false,
            btnPassed: false,
            btnUnPassed: false,
            btnUnBuyed: false,

            registerForm: {
                userName: "",
                password: "",
                currentPassword: "",
                email: "",
                code: ""
            },
            loginForm: {
                userName: "",
                password: "",
                code: ""

            },

            userInfo: {
                headImage: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            },
            // mailDisabled: false,
            // btnName: "发送邮箱验证码",
            // count: 59,
            sellerUserId: "",
            status:"1",
        },
        created() {

            if (sessionStorage.getItem("sellerUserId") != null) {
                this.sellerUserId = sessionStorage.getItem("sellerUserId");
                this.getGoodsInfo();

                axios.get("/user/getSeller2/" + this.sellerUserId).then((res) => {
                    this.sellerInfo = res.data.data;
                    console.log(this.sellerInfo.avgRate)
                    if (this.sellerInfo.avgRate == null) {
                        this.sellerInfo.avgRate = "暂无评分"
                    }
                })
            }
        },

        methods: {
            onPreview() {
                this.showViewer = true;
            },
            closeViewer() {
                this.showViewer = false;
            },

            jumpLogin() {
                window.location.href = "./login.html";
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getGoodsInfo();
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            seeDetail(goodsId) {
                sessionStorage.setItem("currentGoodsId", goodsId);
                window.location.href = "./goodsDetail.html"
            },

            getGoodsInfo() {
                if(this.status != "3"){
                    axios.get("/goodsInfo/getAllBySeller/" + this.pagination.currentPage + "/" + this.pagination.pageSize + "/" + this.status + "/" + this.sellerUserId)
                        .then((res) => {
                            this.pagination.currentPage = res.data.data.pageNum;
                            this.goodsInfo = res.data.data.list;
                            this.pagination.total = res.data.data.total;

                        })
                }else {
                    axios.get("/evaluation/getAll/" + this.sellerUserId).then((res) => {
                        this.evaluationList = res.data.data;
                    })
                }

                this.btnUnChecked = false;
                this.btnPassed = false;
                this.btnUnBuyed = false;
                this.evaluationVisible = false;
                if (this.status == "1") {
                    this.btnUnChecked = true;
                }
                if (this.status == "2") {
                    this.btnPassed = true;
                }
                if (this.status == "3") {
                    this.btnUnBuyed = true;
                    this.evaluationVisible = true;
                }


            },
            changeStatus(status) {
                this.status = status;
                this.pagination.currentPage = 1;
                this.getGoodsInfo();
            },

        },




    })
</script>
</script>

</html>